<ng-container *ngIf="form != null">
    <form [formGroup]="form">

        <p-message *ngIf="settingsUnlocked" severity="warn" styleClass="w-full mb-3 py-4 border-round-xl"
            text="Custom settings can cause damage & system instability. Only modify these settings if you understand the risks of running outside designed parameters.">
        </p-message>

        <ng-container *ngIf="!settingsUnlocked && restrictedModels.includes(ASICModel)">
            <div class="field grid p-fluid">
                <label class="col-12 mb-2 md:col-2 md:mb-0" htmlFor="frequency">Frequency</label>
                <div class="col-12 md:col-10">
                    <p-dropdown [options]="dropdownFrequency" optionLabel="name" optionValue="value"
                        formControlName="frequency"></p-dropdown>
                </div>
            </div>

            <div class="field grid p-fluid">
                <label class="col-12 mb-2 md:col-2 md:mb-0" htmlFor="coreVoltage">Core Voltage</label>
                <p-dropdown class="col-12 md:col-10" [options]="dropdownVoltage" optionLabel="name"
                    optionValue="value" formControlName="coreVoltage"></p-dropdown>
            </div>
        </ng-container>

        <ng-container *ngIf="settingsUnlocked === true">

            <div class="field grid p-fluid">
                <label htmlFor="frequency" class="col-12 mb-2 md:col-2 md:mb-0">Frequency</label>
                <div class="col-12 md:col-10">
                    <input pInputText id="frequency" formControlName="frequency" type="number" />
                </div>
            </div>

            <div class="field grid p-fluid">
                <label htmlFor="coreVoltage" class="col-12 mb-2 md:col-2 md:mb-0">Core Voltage</label>
                <div class="col-12 md:col-10">
                    <input pInputText id="coreVoltage" formControlName="coreVoltage" type="number" />
                </div>
            </div>

        </ng-container>

        <div class="col-12" *ngIf="form.get('overheat_mode')?.value === 1">
            <button pButton type="button" label="Disable Overheat Mode"
                    class="p-button-danger w-full py-3"
                    (click)="disableOverheatMode()">
            </button>
            <small class="block mt-1 text-center" style="color: #ff0000;">
                Make sure to reset Frequency and Voltage before clicking this button.
            </small>
        </div>

        <div class="col-12">
            <div class="field-checkbox">
                <p-checkbox name="autofanspeed" formControlName="autofanspeed" inputId="autofanspeed"
                    [binary]="true"></p-checkbox>
                <label for="autofanspeed">Automatic Fan Control</label>
            </div>
        </div>

        <div *ngIf="form.controls['autofanspeed'].value == true">
          <div class="col-12" *ngIf="form.controls['autofanspeed'].value == true">
              <label>Target Temperature {{form.controls['temptarget'].value}}°C</label>
              <p-slider [min]="35" [max]="75" formControlName="temptarget"></p-slider>
          </div>
      </div>

        <div *ngIf="form.controls['autofanspeed'].value != true">
            <div class="col-12" *ngIf="form.controls['autofanspeed'].value != true">
                <label>Fan Speed {{form.controls['fanspeed'].value}}%
                    <b *ngIf="form.controls['fanspeed'].value < 33" style="color:red">Danger: Could Cause
                        Overheating</b> <b *ngIf="form.controls['fanspeed'].value == 100" style="color:	#F2A900">S19
                        Simulator</b></label>

                <p-slider formControlName="fanspeed"></p-slider>
            </div>
        </div>

        <h3 class="mt-5">Display</h3>

        <div class="field grid p-fluid">
            <label class="col-12 mb-2 md:col-2 md:mb-0" htmlFor="display">Display</label>
            <div class="col-12 md:col-10">
                <p-dropdown [options]="displays" formControlName="display"></p-dropdown>
            </div>
        </div>

        <div class="field grid p-fluid">
            <label class="col-12 mb-2 md:col-2 md:mb-0" htmlFor="rotation">Rotation</label>
            <div class="col-12 md:col-10">
                <p-dropdown [options]="rotations" formControlName="rotation"></p-dropdown>
            </div>
        </div>

        <div class="col-12 md:col-4">
            <div class="field-checkbox">
                <p-checkbox name="invertscreen" formControlName="invertscreen" inputId="invertscreen"
                    [binary]="true"></p-checkbox>
                <label for="invertscreen">Invert Screen <i class="pi pi-info-circle" style="font-size: 0.8rem; margin-left: 0.2rem;" pTooltip="Inverts the colors"></i></label>
            </div>
        </div>

        <div class="field grid p-fluid">
            <label htmlFor="displayTimeoutControl" class="col-12 md:col-2 hidden md:flex mb-2 md:mb-0 relative" style="top: -5px;">
                Display Sleep
            </label>
            <div class="col-12 md:col-10">
                <label class="block mb-2">
                    <ng-container *ngIf="this.form.controls['displayTimeout'].value == 0">
                        Display always off
                    </ng-container>
                    <ng-container *ngIf="this.form.controls['displayTimeout'].value > 0">
                        Display timeout: {{this.form.controls['displayTimeout'].value * 60 | dateAgo}}
                    </ng-container>
                    <ng-container *ngIf="this.form.controls['displayTimeout'].value == -1">
                        Display always on
                    </ng-container>
                </label>
                <p-slider [min]="0" [max]="displayTimeoutMaxSteps" [step]="1" [formControl]="displayTimeoutControl"></p-slider>
                <input type="hidden" formControlName="displayTimeout" />
            </div>
        </div>

        <h3 class="mt-5">Statistics</h3>

        <div class="flex flex-column mb-5 gap-3">
            <div>
                <label class="block mb-2">
                    <ng-container *ngIf="this.form.controls['statsFrequency'].value == 0">
                        Data logging disabled
                    </ng-container>
                    <ng-container *ngIf="this.form.controls['statsFrequency'].value > 0">
                        Log data every {{form.controls['statsFrequency'].value | dateAgo: {strict: true} }} for {{(form.controls['statsFrequency'].value * 720) | dateAgo}}
                    </ng-container>
                </label>
                <p-slider [min]="0" [max]="statsFrequencyMaxSteps" [step]="1" [formControl]="statsFrequencyControl"></p-slider>
                <input type="hidden" formControlName="statsFrequency" />
            </div>
        </div>

        <div class="flex mt-5 gap-3">
            <button pButton [disabled]="!form.dirty || form.invalid" (click)="updateSystem()"
                class="btn btn-primary">Save</button>

            <button pButton [disabled]="!savedChanges" (click)="restart()">Restart</button>

            <button *ngIf="settingsUnlocked" pButton pButton="p-button-danger" (click)="toggleOverclockMode(false)"
                class="p-button-danger" pTooltip="Return to safe preset values only">Disable Overclock Mode</button>
        </div>

    </form>
</ng-container>
